Array of Objects in JavaScript | Dev Notes

ARRAY OF OBJECTS IN JAVASCRIPT - COMPLETE NOTE WITH DIAGRAMS

This note explains arrays of objects in simple language.

This topic is very important because in real JavaScript programs, data is often stored not as one object and not as one simple array, but as an array of objects.

You will see this everywhere in full-stack development:

users list
products list
books list
messages list
API responses
database records

1. What is an array of objects?

An object describes one thing.

An array of objects describes many similar things.

Example idea

one book = one object
many books = an array of objects

Diagram 1. One object vs array of objects

One book
↓
{ title, author, rating }

Many books
↓
[
  { title, author, rating },
  { title, author, rating },
  { title, author, rating }
]

Explanation

If one object stores information about one item, then an array of objects stores a collection of similar items.

2. Example of an array of objects

const books = [
  {
    title: "The Last Kingdom",
    author: "Bernard Cornwell",
    rating: 8.38,
  },
  {
    title: "Beside Still Waters",
    author: "Robert Sheckley",
    rating: 8.51,
  },
  {
    title: "The Tell-Tale Heart",
    author: "Edgar Allan Poe",
    rating: 7.75,
  },
];

Diagram 2. Structure of the `books` array

books
│
├─ index 0 → { title, author, rating }
├─ index 1 → { title, author, rating }
└─ index 2 → { title, author, rating }

Explanation

books is an array.

Each element inside books is an object.

So this is a structure with two levels:

array level
object level

3. Why arrays of objects are useful

Arrays of objects are useful when you have many similar entities.

Examples:

many books
many users
many products
many orders

Each object has the same kind of structure, but different values.

Diagram 3. Same structure, different values

Book 1 → { title, author, rating }
Book 2 → { title, author, rating }
Book 3 → { title, author, rating }

Same keys
Different values

Explanation

Usually, objects in the array have the same property names.

That makes them easier to work with.

4. Important idea: same keys, different values

In most real tasks, all objects in the collection follow the same pattern.

Example

const books = [
  { title: "Book A", author: "Author A", rating: 8 },
  { title: "Book B", author: "Author B", rating: 9 },
  { title: "Book C", author: "Author C", rating: 7 },
];

All objects have:

title
author
rating

Only the values change.

Diagram 4. Repeated object pattern

books
│
├─ { title, author, rating }
├─ { title, author, rating }
└─ { title, author, rating }

Explanation

This repeated structure is what makes arrays of objects so useful in programming.

5. Iterating over an array of objects

To go through an array of objects, we usually use a for...of loop.

Example

const books = [
  {
    title: "The Last Kingdom",
    author: "Bernard Cornwell",
    rating: 8.38,
  },
  {
    title: "Beside Still Waters",
    author: "Robert Sheckley",
    rating: 8.51,
  },
  {
    title: "The Tell-Tale Heart",
    author: "Edgar Allan Poe",
    rating: 7.75,
  },
];

for (const book of books) {
  console.log(book);
  console.log(book.title);
  console.log(book.author);
  console.log(book.rating);
}

Diagram 5. Array iteration over objects

for (const book of books)

Iteration 1:
book = first object

Iteration 2:
book = second object

Iteration 3:
book = third object

Explanation

On each iteration, the variable book stores one object from the array.

6. What happens inside the loop

Inside the loop, book is already one object.

So we can access its properties with dot notation:

book.title
book.author
book.rating

Diagram 6. Inside one iteration

book
│
├─ title  → book.title
├─ author → book.author
└─ rating → book.rating

Explanation

This is possible because each element in the array is an object with known keys.

7. Step-by-step iteration example

const books = [
  {
    title: "The Last Kingdom",
    author: "Bernard Cornwell",
    rating: 8.38,
  },
  {
    title: "Beside Still Waters",
    author: "Robert Sheckley",
    rating: 8.51,
  },
  {
    title: "The Tell-Tale Heart",
    author: "Edgar Allan Poe",
    rating: 7.75,
  },
];

for (const book of books) {
  console.log(book.title);
}

What gets printed?

Iteration 1:
book.title → "The Last Kingdom"

Iteration 2:
book.title → "Beside Still Waters"

Iteration 3:
book.title → "The Tell-Tale Heart"

Explanation

The loop takes one object at a time and reads the title property from it.

Diagram 7. Other examples

Example

const workers = [
  { name: "Sarah", position: "packer", shift: "morning" },
  { name: "Tom", position: "operator", shift: "night" },
  { name: "Mira", position: "cleaner", shift: "evening" }
];

for (const worker of workers) {
  console.log(worker.name, worker.position, worker.shift);
}

Output

Sarah packer morning
Tom operator night
Mira cleaner evening

You can also make it nicer with text:

for (const worker of workers) {
  console.log(`${worker.name} is a ${worker.position} and works the ${worker.shift} shift.`);
}

Output

Sarah is a packer and works the morning shift.
Tom is a operator and works the night shift.
Mira is a cleaner and works the evening shift.

8. Searching for an object by property value

A very common task is finding an object whose property has a specific value.

For example:

find a book by author
find a user by email
find a product by name

To do this, we:

loop through the array
check a condition
work with the matching object

Diagram 8. Search logic

Go through each object
↓
Check needed property
↓
Match found?
│
├─ yes → use this object
└─ no  → continue loop

Explanation

This is one of the most common tasks with arrays of objects.

9. Searching for a book by author

const books = [
  {
    title: "The Last Kingdom",
    author: "Bernard Cornwell",
    rating: 8.38,
  },
  {
    title: "Beside Still Waters",
    author: "Robert Sheckley",
    rating: 8.51,
  },
  {
    title: "The Tell-Tale Heart",
    author: "Edgar Allan Poe",
    rating: 7.75,
  },
];

const authorToSearchFor = "Robert Sheckley";

for (const book of books) {
  if (book.author === authorToSearchFor) {
    console.log(book);
    console.log(book.title);
    console.log(book.rating);
  }
}

Diagram 9. Search step by step

authorToSearchFor = "Robert Sheckley"

Book 1:
author = "Bernard Cornwell"
match? no

Book 2:
author = "Robert Sheckley"
match? yes
↓
use this object

Explanation

The loop checks each book's author.

When the correct author is found, the if block runs.

10. Important correction in the search example

If you want to print book.rating, then each object should also have a rating property.

So the corrected version should include ratings in the objects.

This is why the version above includes:

title
author
rating

for every book.

Diagram 10. Why this correction matters

If you write:
console.log(book.rating)

Then each object should have:
rating

Explanation

If rating is missing, JavaScript returns undefined.

11. Searching and stopping early with `break`

If you only need the first match, you can stop the loop after finding it.

Example

const books = [
  {
    title: "The Last Kingdom",
    author: "Bernard Cornwell",
    rating: 8.38,
  },
  {
    title: "Beside Still Waters",
    author: "Robert Sheckley",
    rating: 8.51,
  },
  {
    title: "The Tell-Tale Heart",
    author: "Edgar Allan Poe",
    rating: 7.75,
  },
];

const authorToSearchFor = "Robert Sheckley";

for (const book of books) {
  if (book.author === authorToSearchFor) {
    console.log(book.title);
    break;
  }
}

Diagram 11. Search with early stop

Check book 1
↓
not match

Check book 2
↓
match
↓
print result
↓
break
↓
stop loop

Explanation

This is useful when you do not need to keep checking after the first match.

12. Collecting all values of one property

Another very common task is getting all values of one property from all objects.

For example:

all titles
all ratings
all authors

To do this, we:

create a new empty array
loop through the objects
push one property into the new array

Diagram 12. Collecting one property

books array
↓
take one property from each object
↓
put those values into a new array

Explanation

This is one of the most useful patterns when working with collections of objects.

13. Example: get all book titles

const books = [
  { title: "The Last Kingdom", author: "Bernard Cornwell", rating: 8.2 },
  { title: "Beside Still Waters", author: "Robert Sheckley", rating: 9 },
  { title: "The Tell-Tale Heart", author: "Edgar Allan Poe", rating: 6.8 },
];

const titles = [];

for (const book of books) {
  titles.push(book.title);
}

console.log(titles);
// ["The Last Kingdom", "Beside Still Waters", "The Tell-Tale Heart"]

Diagram 13. Building the `titles` array

Start:
titles = []

Take book 1 title
↓
["The Last Kingdom"]

Take book 2 title
↓
["The Last Kingdom", "Beside Still Waters"]

Take book 3 title
↓
["The Last Kingdom", "Beside Still Waters", "The Tell-Tale Heart"]

Explanation

Each iteration adds one title to the new array.

14. Why this pattern is important

This pattern is useful when you want:

just names
just prices
just ratings
just IDs
just emails

from a bigger collection of objects.

Diagram 14. One collection becomes another

Array of objects
↓
extract one property
↓
array of simple values

Explanation

This is a very common transformation in real-world JavaScript.

15. Example: collect all authors

const books = [
  { title: "The Last Kingdom", author: "Bernard Cornwell", rating: 8.2 },
  { title: "Beside Still Waters", author: "Robert Sheckley", rating: 9 },
  { title: "The Tell-Tale Heart", author: "Edgar Allan Poe", rating: 6.8 },
];

const authors = [];

for (const book of books) {
  authors.push(book.author);
}

console.log(authors);
// ["Bernard Cornwell", "Robert Sheckley", "Edgar Allan Poe"]

Diagram 15. Collecting authors

book.author
↓
add to authors array
↓
repeat for all books

Explanation

The same pattern works for any property.

16. Calculating the average rating

Another common task is calculating something from object values.

For example:

total score
average rating
total price
number of likes

To get the average rating:

add all ratings together
divide by the number of books

Diagram 16. Average formula

Average =
sum of all ratings
÷
number of books

Explanation

This is a standard math pattern used often in programming.

17. Example: average rating

Exercise A

const books = [
  { title: "The Last Kingdom", author: "Bernard Cornwell", rating: 8.2 },
  { title: "Beside Still Waters", author: "Robert Sheckley", rating: 9 },
  { title: "The Tell-Tale Heart", author: "Edgar Allan Poe", rating: 6.8 },
];

let totalRating = 0;

for (const book of books) {
  totalRating += book.rating;
}

const averageRating = totalRating / books.length;
console.log(averageRating); // 8

Diagram 17. Step-by-step average calculation

Start:
totalRating = 0

After book 1:
0 + 8.2 = 8.2

After book 2:
8.2 + 9 = 17.2

After book 3:
17.2 + 6.8 = 24

books.length = 3

averageRating = 24 / 3 = 8

Explanation

This is a very common example of working with numeric properties in an array of objects.

Exercise B

Create an array of workers:

const workers = [
  { name: "Sarah", hours: 8 },
  { name: "Tom", hours: 6 },
  { name: "Mira", hours: 7 }
];

Calculate the total hours and print it.

Expected output

Solution

const workers = [
  { name: "Sarah", hours: 8 },
  { name: "Tom", hours: 6 },
  { name: "Mira", hours: 7 }
];

let totalHours = 0;

for (const worker of workers) {
  totalHours += worker["hours"];
}

console.log(totalHours);

18. General pattern for totals

This same pattern works for many things:

total price of products
total score of players
total pages of books
total salary of employees
total hours of workers

Diagram 18. Total pattern

Start with total = 0
↓
loop through objects
↓
add one numeric property each time
↓
final total

Explanation

This is one of the most important beginner patterns in JavaScript.

19. Real-life example: products

const products = [
  { name: "Phone", price: 500 },
  { name: "Laptop", price: 1200 },
  { name: "Tablet", price: 700 },
];

let totalPrice = 0;

for (const product of products) {
  totalPrice += product.price;
}

console.log(totalPrice); // 2400

Diagram 19. Summing product prices

500 + 1200 + 700 = 2400

Explanation

This is the same logic as average rating, but without dividing at the end.

20. Real-life example: find a user by email

const users = [
  { name: "Sarah", email: "exemple@nikitagoluban.eu" },
  { name: "Nikita", email: "exemple2@nikitagoluban.eu" },
  { name: "Isaac", email: "exemple3@nikitagoluban.eu" },
];

const emailToFind = "exemple2@nikitagoluban.eu";

for (const user of users) {
  if (user.email === emailToFind) {
    console.log(user.name); // "Nikita"
  }
}

Diagram 20. Search by email

Check user 1 email
↓
not match

Check user 2 email
↓
match
↓
print user name

Explanation

This is one of the most common search tasks in applications.

21. Real-life example: collect all product names

const products = [
  { name: "Phone", price: 500 },
  { name: "Laptop", price: 1200 },
  { name: "Tablet", price: 700 },
];

const names = [];

for (const product of products) {
  names.push(product.name);
}

console.log(names); // ["Phone", "Laptop", "Tablet"]

Diagram 21. Collecting product names

products
↓
take product.name from each object
↓
names array

Explanation

This is exactly the same pattern as collecting book titles.

22. Objects in the array are still normal objects

This is important:

Each item in the array is still a normal object.

So you can use normal object access:

book.title
book.author
book.rating

Diagram 22. Array element = object

books[0]
↓
one object
↓
books[0].title works

Explanation

Array of objects means:

outer structure = array
inner items = objects

23. Two levels of access

With arrays of objects, you often use two levels:

choose the object from the array
choose the property from that object

Example

const books = [
  { title: "The Last Kingdom", author: "Bernard Cornwell", rating: 8.2 },
  { title: "Beside Still Waters", author: "Robert Sheckley", rating: 9 },
];

console.log(books[0].title);  // "The Last Kingdom"
console.log(books[1].author); // "Robert Sheckley"

Diagram 23. Two-step access

books[0].title

Step 1:
books[0] → first object

Step 2:
.title → property from that object

Explanation

This is a very common access pattern.

24. Common beginner mistakes

Mistake 1. Forgetting that the array element is an object

Wrong idea:

for (const book of books) {
  console.log(title);
}

Correct:

for (const book of books) {
  console.log(book.title);
}

Mistake 2. Using a property that does not exist

If you write:

console.log(book.price);

but the object has no price, the result is:

undefined

Mistake 3. Forgetting to create a new array before collecting values

Wrong:

for (const book of books) {
  titles.push(book.title);
}

if titles was never created.

Correct:

const titles = [];

first.

Mistake 4. Forgetting to start totals at `0`

Wrong:

let totalRating;

Better:

let totalRating = 0;

Diagram 24. Common mistakes summary

1. book.title, not just title
2. missing property → undefined
3. create result array before push()
4. start numeric total with 0

Explanation

These mistakes are very common when beginners first work with arrays of objects.

25. Practical rule for thinking

When you see an array of objects, think like this:

loop through the array
each loop gives one object
then read or use the needed property from that object

Diagram 25. Mental model

Array of objects
↓
one loop
↓
one object at a time
↓
use object.property

Explanation

This is the easiest way to understand this topic.

26. Quick summary

Array of objects

A collection where each element is an object.

Common pattern

All objects usually have the same keys, but different values.

Iteration

Use for...of to go through the array.

Access

Use dot notation on each object:

book.title
book.author
book.rating

Search

Loop through the array and use if to find a matching object.

Collect values

Create a new array and push one property from each object.

Average

Add numeric values together, then divide by array length.

Diagram 26. Final map of arrays of objects

Array of objects
│
├─ iterate with for...of
├─ access object properties
├─ search by property value
├─ collect one property into a new array
└─ calculate totals or averages

Explanation

These are the main beginner tasks with arrays of objects.

27. Revision block

1. One object describes one thing
2. An array of objects describes many similar things
3. Each array element is still a normal object
4. Use for...of to iterate through the array
5. Inside the loop, use object.property
6. Search by checking a property in an if statement
7. To collect one property, create a new array and use push()
8. To get an average, sum the values and divide by array length

28. Final conclusion

Arrays of objects are one of the most important real-world data structures in JavaScript.

If you understand:

what an array of objects is
how to iterate over it
how to access properties
how to search by property value
how to collect property values
how to calculate totals and averages

then you already have a strong base for working with real application data.

Arrays of objects are used everywhere in full-stack development:

API results
database records
user lists
products
orders
messages
dashboards

⬅ Back

ARRAY OF OBJECTS IN JAVASCRIPT - COMPLETE NOTE WITH DIAGRAMS

1. What is an array of objects?

Example idea

Diagram 1. One object vs array of objects

Explanation

2. Example of an array of objects

Diagram 2. Structure of the books array

Explanation

3. Why arrays of objects are useful

Diagram 3. Same structure, different values

Explanation

4. Important idea: same keys, different values

Example

Diagram 4. Repeated object pattern

Explanation

5. Iterating over an array of objects

Example

Diagram 5. Array iteration over objects

Explanation

6. What happens inside the loop

Diagram 6. Inside one iteration

Explanation

7. Step-by-step iteration example

Explanation

Diagram 7. Other examples

Example

Output

Output

8. Searching for an object by property value

Diagram 8. Search logic

Explanation

9. Searching for a book by author

Diagram 9. Search step by step

Explanation

10. Important correction in the search example

Diagram 10. Why this correction matters

Explanation

11. Searching and stopping early with break

Example

Diagram 11. Search with early stop

Explanation

12. Collecting all values of one property

Diagram 12. Collecting one property

Explanation

13. Example: get all book titles

Diagram 13. Building the titles array

Explanation

14. Why this pattern is important

Diagram 14. One collection becomes another

Explanation

15. Example: collect all authors

Diagram 15. Collecting authors

Explanation

16. Calculating the average rating

Diagram 16. Average formula

Explanation

17. Example: average rating

Exercise A

Diagram 17. Step-by-step average calculation

Explanation

Exercise B

Expected output

Solution

18. General pattern for totals

Diagram 18. Total pattern

Explanation

19. Real-life example: products

Diagram 19. Summing product prices

Explanation

20. Real-life example: find a user by email

Diagram 20. Search by email

Explanation

21. Real-life example: collect all product names

Diagram 21. Collecting product names

Explanation

22. Objects in the array are still normal objects

Diagram 22. Array element = object

Explanation

23. Two levels of access

Example

Diagram 2. Structure of the `books` array

11. Searching and stopping early with `break`

Diagram 13. Building the `titles` array

Mistake 4. Forgetting to start totals at `0`